<template>
  <dw-page-warpper>
    <dw-menu-datagrid-form
      :columns="columns"
      :data-grid-title="dataGridTitle"
      v-model:activeFormData="formData"
      :render-form-title="renderFormTitle"
      :get-page-http-config="getPageHttpConfig"
      :del-info-http-config="delInfoHttpConfig"
      :del-list-http-config="delListHttpConfig"
      :get-info-http-config="getInfoHttpConfig"
      :add-info-http-config="addInfoHttpConfig"
      :update-info-http-config="updateInfoHttpConfig"
    >
      <template #formSlot>
        <table class="dw-form-table">
          <tbody>
            <tr>
              <td class="dw-td-label">模块</td>
              <td>{{ formData.operationModuleName }}</td>
              <td class="dw-td-label">操作方式</td>
              <td>{{ formData.operationType }}</td>
            </tr>
            <tr>
              <td class="dw-td-label">操作人</td>
              <td>{{ formData.operationModuleName }}</td>
              <td class="dw-td-label">操作时间</td>
              <td>{{ formData?.createdTime || '' }}</td>
            </tr>
            <tr>
              <td class="dw-td-label">操作说明</td>
              <td :colspan="3"></td>
            </tr>
            <tr>
              <td class="dw-td-label">操作结果</td>
              <td :colspan="3"></td>
            </tr>
            <tr>
              <td class="dw-td-label">错误消息</td>
              <td :colspan="3"></td>
            </tr>
            <tr>
              <td class="dw-td-label">数据差异<br /></td>
              <td :colspan="3">
                <dw-diff-editor ref="monaco" :original-value="formData.originalValue" :modified-value="formData.modifiedValue" height="400px"></dw-diff-editor>
              </td>
            </tr>
          </tbody>
        </table>
      </template>
    </dw-menu-datagrid-form>
  </dw-page-warpper>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import type { IAddInfoHttpConfig, IColumn, IDelInfoHttpConfig, IDelListHttpConfig, IGetInfoHttpConfig, IGetPageHttpConfig, IUpdateInfoHttpConfig } from '@/types/menu-datagrid-form';
import type { IOperationLog } from '../../log/operation-log/operation-log';
import DwDiffEditor from '@/components/code-editor/differ-editor/index.vue';
import { dwDeepClone } from '@/utils/func';

defineOptions({
  name: 'SysOperationLog',
});
const formData = ref<IOperationLog>({
  id: '',
  projectId: '',
  operationModuleName: '',
  operationType: '',
  operationStatus: 1,
  operationMessage: '',
  originalValue: '',
  modifiedValue: '',
  failMessage: '',
  elapseTime: 0,
});

const dataGridTitle = '界面元素列表';
const renderFormTitle = () => {
  return '操作日志';
};
const columns = ref<IColumn[]>([
  {
    prop: 'operationModuleName',
    label: '模块名称',
    align: 'left',
    width: 220,
  },
  {
    prop: 'operationType',
    label: '操作类型',
    align: 'left',
    width: 100,
  },
  {
    prop: 'operationMessage',
    label: '操作日志',
    align: 'left',
  },
  {
    prop: 'operationStatus',
    label: '操作结果',
    align: 'left',
    width: 100,
  },
  {
    prop: 'elapsedTime',
    label: '响应时间(毫秒)',
    align: 'center',
    width: 120,
  },
  {
    prop: 'createUserId',
    label: '操作人',
    align: 'center',
    width: 120,
  },
  {
    prop: 'createdTime',
    label: '操作时间',
    align: 'right',
    width: 160,
  },
]);
const delInfoHttpConfig: IDelInfoHttpConfig = {
  url: '/admin-api/log/operation/log/#{id}',
  delInfoMsgEmphasize: '#{operationModuleName}',
};
const delListHttpConfig: IDelListHttpConfig = {
  url: '/admin-api/log/operation/log/list',
};

const getPageHttpConfig: IGetPageHttpConfig<IOperationLog> = {
  url: '/admin-api/log/operation/log/page/list',
};
const getInfoHttpConfig: IGetInfoHttpConfig<IOperationLog> = {
  url: '/admin-api/log/operation/log/#{id}',
};
const addInfoHttpConfig: IAddInfoHttpConfig<IOperationLog> = {
  url: '/admin-api/log/operation/log',
};
const updateInfoHttpConfig: IUpdateInfoHttpConfig<IOperationLog> = {
  url: '/admin-api/log/operation/log',
};
</script>
<style lang="scss" scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.demo-tabs :deep(.el-tabs__nav) {
  padding: 0 20px;
}
</style>
